<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6_固定定位广告条</title>
    <style>
        .top {
            height: 120px;
            background-color: #5aa4ae;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top: 0;
            width: 100vw;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FF7799;
            left: 20px;
        }
        .right {
            background-color: #f35336;
            right: 20px;
        }
        .main {
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab neque nesciunt numquam quas qui recusandae. Ab
            assumenda distinctio eum hic, inventore laboriosam laudantium nobis officia praesentium quaerat quo
            reiciendis veniam.
        </div>
        <div>Dolore eaque officiis omnis quas quis recusandae ut vel! Adipisci autem ea fugiat libero obcaecati quaerat
            quos repudiandae sit! Error ex inventore itaque, iure maxime natus nihil nulla quia sint.
        </div>
        <div>Earum, molestiae totam. Atque error esse explicabo laboriosam laudantium mollitia optio quam quasi, quod
            unde. Aperiam commodi consequatur eligendi error explicabo minus odit, repellat, saepe soluta sunt tempore
            unde vitae?
        </div>
        <div>Ab ad adipisci aperiam at atque aut consectetur corporis, debitis deleniti dolor doloribus eos et, hic
            itaque laboriosam minima non numquam odio quaerat quidem quis quo ratione ullam ut voluptas?
        </div>
        <div>Adipisci amet architecto commodi consectetur dignissimos, dolorem eaque enim est et laudantium, maiores
            maxime minima molestiae mollitia nam obcaecati omnis optio perspiciatis quidem quisquam reprehenderit sed
            temporibus unde vitae voluptate!
        </div>
        <div>Aliquam aspernatur consequatur dignissimos fugiat! Modi, voluptates voluptatibus? Accusamus aperiam
            corporis dicta distinctio eos ex excepturi expedita explicabo facilis fuga illum iusto magni maiores neque,
            nisi nobis officia quasi tempora.
        </div>
        <div>Adipisci amet, at distinctio eum ipsa, laborum libero maiores minus molestias porro quasi, quidem sunt?
            Aperiam et incidunt ipsa nihil nobis omnis placeat sapiente? Accusamus laborum odit officia saepe
            temporibus.
        </div>
        <div>Accusamus alias aspernatur commodi cum dignissimos doloremque ea exercitationem facilis id, incidunt ipsum
            iure labore magnam minus perspiciatis placeat porro sequi tempore temporibus voluptatem? Ad ipsam minus
            necessitatibus numquam vitae.
        </div>
        <div>Ad dolorum explicabo ipsa officiis praesentium quae reiciendis repellat sed, tempora velit. Consectetur
            ducimus eaque, harum libero maiores perspiciatis quo sint veritatis. Aspernatur porro quaerat rem, sint
            tempora velit vitae!
        </div>
        <div>Consequatur cumque cupiditate fugit ipsum molestias omnis perferendis perspiciatis quas quidem,
            reprehenderit? Ad eveniet facere minima placeat quae. Delectus dignissimos eius illum ipsum laudantium
            mollitia reiciendis repellat repudiandae similique, tempora.
        </div>
        <div>Ad asperiores assumenda consectetur consequatur deserunt dicta dolor enim et ipsum magni maxime minima
            nulla odio officia placeat quam, quisquam ratione reiciendis repudiandae rerum saepe sapiente ullam ut
            voluptate voluptatum!
        </div>
        <div>A aliquam architecto beatae debitis deleniti deserunt dicta dolor doloremque ducimus est et ex hic illo
            itaque iure laudantium maxime odio, odit officiis quae repudiandae rerum sint tempore temporibus vel?
        </div>
        <div>Adipisci eius explicabo inventore officiis quam! A ab amet consequuntur dignissimos doloribus, enim et fuga
            harum impedit libero minima placeat quis reprehenderit voluptatem, voluptatibus! Dolor eveniet modi officiis
            quibusdam tempora.
        </div>
        <div>A accusamus aperiam at consequatur dolor eaque magnam maxime modi nobis obcaecati odit praesentium
            reiciendis repellat reprehenderit sed sunt, tempore, temporibus unde ut vel? Ipsa nulla officia omnis
            quisquam rem.
        </div>
        <div>Accusantium, asperiores illum iure magni nesciunt officia repellendus. Ab adipisci aliquam amet aperiam,
            dolorum eum illum magnam molestias, neque nobis officiis, possimus quasi quisquam quo sequi sit soluta vero
            voluptate?
        </div>
        <div>Adipisci, culpa, deserunt, doloribus dolorum earum eligendi ex harum incidunt neque sint sunt totam ullam.
            Consequatur cum deleniti earum error excepturi itaque, neque nisi officiis omnis repellat saepe soluta
            voluptatum!
        </div>
        <div>Amet aspernatur commodi consequatur consequuntur cum cumque dolores ducimus eius eos facere iste
            laboriosam, mollitia neque nesciunt officia officiis perspiciatis placeat, quae quia sapiente totam unde,
            vel veniam veritatis voluptatibus.
        </div>
        <div>Asperiores corporis deserunt dolorum est explicabo fuga, incidunt laborum, mollitia nemo nisi nobis officia
            placeat quae quis ratione repellendus reprehenderit sapiente soluta tempore tenetur. Accusantium eos
            excepturi hic libero reprehenderit.
        </div>
        <div>Accusamus aliquam aperiam atque blanditiis culpa deleniti dolorem dolores doloribus eum excepturi expedita
            illum incidunt ipsa labore libero modi, non obcaecati officia possimus quae quasi quo sunt vel velit
            voluptates.
        </div>
        <div>Distinctio in ipsam quidem quos ullam velit voluptas. Aperiam commodi consequuntur cumque delectus
            dignissimos ducimus exercitationem, facere id laudantium necessitatibus nesciunt pariatur perferendis quasi
            quisquam sunt ullam veritatis. Earum, voluptate.
        </div>
        <div>Architecto enim molestias ut. Alias animi culpa eveniet facilis laborum laudantium magnam natus officia
            soluta! Aliquid corporis distinctio esse ipsam maiores maxime nesciunt quaerat quo quos rem sed, similique
            soluta!
        </div>
        <div>Architecto autem dicta laboriosam, maiores molestiae quasi ratione. Ab aliquid atque autem ducimus eveniet
            odio praesentium vitae! Architecto eos facilis fuga, in minima minus molestias ratione repudiandae sit
            tempora tempore?
        </div>
        <div>Alias, aspernatur eligendi, est ex expedita labore magnam minus molestias necessitatibus nesciunt obcaecati
            possimus, provident reprehenderit rerum tempora tenetur vel veritatis voluptates? Aut deleniti eum hic,
            iusto libero sit unde!
        </div>
        <div>Accusantium aperiam architecto aspernatur at cum delectus deleniti distinctio doloribus ducimus ex fugit
            libero neque obcaecati odit officia quae quia quo rem rerum saepe tempora velit, veritatis vitae voluptatem
            voluptatibus?
        </div>
        <div>Cumque dignissimos eveniet magni natus necessitatibus nesciunt nihil quas vero! Aliquam commodi consectetur
            deserunt exercitationem explicabo pariatur porro quas qui tempore ullam! A eaque fuga ipsam reiciendis saepe
            velit veniam?
        </div>
        <div>Ad aliquid at aut beatae corporis dolore earum eveniet excepturi fugit harum hic impedit in incidunt
            laborum neque nisi, obcaecati quas repellat repudiandae rerum sequi temporibus veritatis vitae voluptates,
            voluptatibus!
        </div>
        <div>Impedit nulla quis tenetur voluptas? Blanditiis distinctio ex incidunt odio temporibus, vel. Aspernatur
            consequuntur cum dolore et illo laborum maxime pariatur, quis reprehenderit totam? Deleniti deserunt iste
            magnam quasi suscipit.
        </div>
        <div>Autem cum esse facilis neque reprehenderit sequi vel veritatis! Ab aliquam assumenda aut, blanditiis
            corporis ducimus eligendi excepturi id magnam magni nobis officia, qui quisquam reiciendis saepe tenetur
            unde voluptas.
        </div>
        <div>Atque pariatur, porro? A aspernatur beatae, distinctio eius expedita ipsa ipsum itaque iure, odit, quasi
            repellendus totam vitae. Amet aperiam assumenda eveniet laboriosam necessitatibus obcaecati repellat sequi
            suscipit, velit veritatis.
        </div>
        <div>Atque aut beatae consectetur culpa cum excepturi fuga id impedit molestias placeat quaerat qui, repellendus
            rerum unde vero. Accusantium ad aliquid aperiam dolor eligendi quos reiciendis sunt tenetur! Exercitationem,
            pariatur.
        </div>
    </div>
</body>
</html>